<template>
  <div class="course" @scroll="scrollEvent">
    <div class="navs">
      <div
        class="nav-item"
        v-for="courseNav in course_fieldsss"
        :key="courseNav.id"
        @click="changeCourseNav(courseNav.id)"
        :class="{navItem:true ,active:curId==courseNav.id}"
      >
        {{ courseNav.name }}
      </div>
    </div>
    <div class="types">
      <div class="types-item">
        <h3 :class="{ typesactive: curPage === 2 }" @click="change(2)">综合</h3>
        <h3 :class="{ typesactive: curPage === 1 }" @click="change(1)">最新</h3>
        <h3 :class="{ typesactive: curPage === 3 }" @click="change(3)">最热</h3>
      </div>
      <div class="types-type">
        <div class="types-show">
          <p @click="click">
            {{ levelTitle }}<span>{{ isFlag }}</span>
          </p>
          <div v-show="isShow">
            <h3 :class="{ typesactive: curType == '' }" @click="changeType()">
              全部
            </h3>
            <h3 :class="{ typesactive: curType == '1' }" @click="changeType(1)">
              入门
            </h3>
            <h3
              :class="{ typesactive: curType == '2,3,4,5' }"
              @click="changeType('2,3,4,5')"
            >
              提升
            </h3>
          </div>
        </div>
      </div>
    </div>
    <div class="course">
      <div
        v-show="isLoading"
        class="loading"
        style="
          height: 50px;
          text-align: center;
          line-height: 50px;
          color: gray;
          font-size: 14px;
        "
      >
        加载中......
      </div>
      <!-- 刚开始是显示加载中... 不显示请求数据
            有请求数据 不显示加载中 两者选其一
       -->
      <div v-show="!isLoading">
        <course-item
          v-for="course in coursees"
          :key="course.id"
          :course="course"
        >
        </course-item>
      </div>
    </div>
  </div>
</template>

<script>
import CourseItem from "@/components/CourseItem.vue";
export default {
  name: "LqbCourse",
  data() {
    return {
      course_fieldsss: [], // 保存导航
      curId:6,
      coursees: [], // 保存下面请求的数据
      isShow: false, // 是否显示入门入门和提升
      isFlag: "∨",
      curPage: 2, // 左侧的最新最热排序
      curType: "", // 右侧的入门，提升排序
      levelTitle: "全部", // 右侧的全部
      isLoading: true,
      page: 1, // 初始值是1  第一页
      courseNavId: 0,
    };
  },

  async created() {
    // axios.get("",{params:{请求参数}}) params固定写法
    // axios.post("",{请求参数})
    // "/lqb/api/course-group-list?course_fields=1" ?后面的参数换成对象形式
    const {
      data: { course_fields },
    } = await this.$request("/lqb/api/course-group-list", "GET", {
      params: {
        course_fields: 1,
      },
    });
    this.course_fieldsss = course_fields;
    this.courseNavId = this.course_fieldsss[0].id;
    this.getdatas(); // 首次调用发送这个请求
  },

  methods: {
    // 封装一个公共的方法，供下面两个用(change changeType)
    async getdatas() {
      console.log(111);
      const params = {
        course_fields_ids: this.courseNavId,
        page: this.page,
        limit: 8, // 做分页
        type: this.curPage, // 综合 最新 最热
      };
      if (this.curType) {
        // 右侧没有选中全部，含有请求参数level
        params.level = this.curType;
      }
      const { data: { data },} = await this.$request("/lqb/api/course/video", "GET", {
        params,
      });
      console.log(data);
      this.isLoading = false; // 初始化请求完数据关闭加载中。。。
      // 判断 data 里面是否还有数据 有的话才能触底加载
      if (!data.length) {
        alert("已经到达底部了");
        return;
      }
      // console.log(this.page,this.length);
      this.coursees = this.page == 1 ? data : [...this.coursees, ...data];
    },
    click() {
      this.isShow = !this.isShow;
      if (this.isShow) {
        this.isFlag = "∧";
      } else {
        this.isFlag = "∨";
      }
    },
    change(page) {
      this.curPage = page;
      this.isLoading = true; // 请求数据前先显示加载中
      this.getdatas(); // 左侧点的时候发送请求
      this.page = 1; // 请求第一页
    },
    changeType(type) {
      this.page = 1; // 默认重置为第一页
      if (!type) {
        this.curType = "";
      } else {
        this.curType = type;
      }
      this.isLoading = true; // 请求数据前先显示加载中
      this.getdatas(); // 右侧点的时候发送请求
      this.isShow = false; //点完入门 从新隐藏
      if (!type) this.levelTitle = "全部";
      else if (type == "1") this.levelTitle = "入门";
      else if (type == "2,3,4,5") this.levelTitle = "提升";
    },
    scrollEvent(e) {
      // console.log("---", e.scrollTop);
      const st = e.target.scrollTop;
      const cheight = e.target.clientHeight;
      const theight = e.target.scrollHeight;
      if (st + cheight >= theight) {
        console.log("到底了");
        this.page++;
        this.getdatas();
      }
    },
    changeCourseNav(id) {
      // 所有选项都要初始化
      this.courseNavId = id;
      this.page = 1;
      this.curPage = 2;
      this.curType = "";
      this.levelTitle = "全部";
      this.getdatas();
      this.curId = id;
    },
  },
  components: {
    CourseItem,
  },
};
</script>

<style lang="scss" scoped>
.course {
  height: calc(100vh - 48px - 44px - 60px);
  overflow-y: scroll;
}
// 导航高亮
.active{
  font-size: 22px;
  font-weight: bolder;
}
.navs {
  width: 100vw;
  height: 60px;
  overflow-x: scroll; // 开启滚动
  display: flex;
  align-items: center;
  &::-webkit-scrollbar {
    display: none;
  }
  > div {
    flex-shrink: 0;
    padding: 0 10px;
  }
}
.types {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  .types-item {
    display: flex;
    height: 48px;
    line-height: 48px;
    h3 {
      margin: 0 5px;
      font-weight: normal;
      font-size: 16px;
    }
  }
  .types-type {
    position: relative;
    .types-show {
      background-color: #fff;
      p {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
      }
      div {
        position: absolute;
        top: 48px;
        right: 5px;
        background-color: white;
        h3 {
          height: 50px;
          line-height: 50px;
          width: 110px;
          text-align: center;
          color: #5b6164;
        }
      }
    }
  }
  .typesactive {
    color: blue !important;
  }
}
</style>
